<template>
	<div class="div-user-sum">
		<div class="div-top">
			<span>{{dataInfo.name}}</span>
		</div>
		<el-row :gutter="12" style='padding: 0 15px;margin: 0 0 10px;box-sizing: border-box;'>
			<el-col :span="4">
				<el-card shadow="hover">
					操作限时：{{dataInfo.timeLimit}}
				</el-card>
			</el-col>
			<el-col :span="4">
				<el-card shadow="hover">
					总分：{{dataInfo.score}}
				</el-card>
			</el-col>
			<el-col :span="4">
				<el-card shadow="hover">
					及格分：{{dataInfo.passScore}}
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					所属专业：{{dataInfo.majorName}}
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					更新时间：{{dataInfo.updateTime}}
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="12" style='padding: 0 15px;margin: 0 0 10px;box-sizing: border-box;'>
			<el-col :span="24">
				<el-card shadow="hover">
					实验介绍：{{dataInfo.describes}}
				</el-card>
			</el-col>
		</el-row>
		<div class="info_title" v-if="dataInfo && dataInfo.packageIncludeDto">
			实验资源
		</div>
		<div class="info_box" v-if="dataInfo && dataInfo.packageIncludeDto">
			<el-tabs v-model="activeReource" type="card">
				<el-tab-pane label="低画质" name="1">
					<el-table :data="dataInfo.packageIncludeDto.lowPictureQualityList" border>
						<el-table-column prop="code" label="资源编号" align='center'>
							<template slot-scope="scope">
								{{scope.row.code}}
							</template>
						</el-table-column>
						<el-table-column prop="packageName" label="资源名" align='center'>
							<template slot-scope="scope">
								{{scope.row.packageName}}
							</template>
						</el-table-column>
						<el-table-column prop="type" label="资源类型" align='center'>
							<template slot-scope="scope">
								<span v-for="item in types" v-if="scope.row.type == item.value">{{item.label}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="explains" label="资源说明" align='center'>
							<template slot-scope="scope">
								{{scope.row.explains}}
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="中画质" name="2">
					<el-table :data="dataInfo.packageIncludeDto.inPictureQualityList" border>
						<el-table-column prop="code" label="资源编号" align='center'>
							<template slot-scope="scope">
								{{scope.row.code}}
							</template>
						</el-table-column>
						<el-table-column prop="packageName" label="资源名" align='center'>
							<template slot-scope="scope">
								{{scope.row.packageName}}
							</template>
						</el-table-column>
						<el-table-column prop="type" label="资源类型" align='center'>
							<template slot-scope="scope">
								<span v-for="item in types" v-if="scope.row.type == item.value">{{item.label}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="explains" label="资源说明" align='center'>
							<template slot-scope="scope">
								{{scope.row.explains || '-'}}
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="高画质" name="3">
					<el-table :data="dataInfo.packageIncludeDto.highPictureQualityList" border>
						<el-table-column prop="code" label="资源编号" align='center'>
							<template slot-scope="scope">
								{{scope.row.code}}
							</template>
						</el-table-column>
						<el-table-column prop="packageName" label="资源名" align='center'>
							<template slot-scope="scope">
								{{scope.row.packageName}}
							</template>
						</el-table-column>
						<el-table-column prop="type" label="资源类型" align='center'>
							<template slot-scope="scope">
								<span v-for="item in types" v-if="scope.row.type == item.value">{{item.label}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="explains" label="资源说明" align='center'>
							<template slot-scope="scope">
								{{scope.row.explains}}
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="info_title">
			实验步骤
		</div>
		<div class="info_box" v-if="dataInfo && dataInfo.stepDtoList">
			<el-tabs v-model="activeStep" type="card">
				<el-tab-pane :label="'（'+item.seq+'）'+item.title" :name="index + ''" v-for='(item,index) in dataInfo.stepDtoList'>
					<el-table :data="item.stepSmallList" border>
						<el-table-column prop="smallSeq" label="步骤编号" align='center'>
							<template slot-scope="scope">
								{{scope.row.smallSeq}}
							</template>
						</el-table-column>
						<el-table-column prop="smallTitle" label="步骤名" align='center'>
							<template slot-scope="scope">
								{{scope.row.smallTitle}}
							</template>
						</el-table-column>
						<el-table-column prop="smallExpectScore" label="类型" align='center'>
							<template slot-scope="scope">
								<span v-for="item in smallTypes" v-if="scope.row.smallType == item.value">{{item.label}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="smallExpectTime" label="标准用时" align='center'>
							<template slot-scope="scope">
								{{scope.row.smallExpectTime}}
							</template>
						</el-table-column>
						<el-table-column prop="smallExpectScore" label="分数" align='center'>
							<template slot-scope="scope">
								{{scope.row.smallExpectScore}}
							</template>
						</el-table-column>
						<el-table-column prop="majorId" label="操作" width='220' align='center'>
							<template slot-scope="scope">
								<el-button type='primary' size='small' @click="openExp(scope.row,scope.$index)">分数说明</el-button>
								<el-button type='success' size='small' @click="openTopics(scope.row,scope.$index)" v-if='scope.row.smallType == 2'>试题详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="info_title">
			实验报告
		</div>
		<div class="info_box" v-if="dataInfo && dataInfo.reportDto">
			<el-form >
				<el-form-item label="模板名称" :label-width="'110px'" prop="vrReportTemplateName">
					{{dataInfo.reportDto.vrReportTemplateName}}
				</el-form-item>
				<el-form-item label="所属专业" :label-width="'110px'" >
					{{dataInfo.reportDto.majorName}}
				</el-form-item>
				<el-form-item label="报告内容" :label-width="'110px'" prop="vrCorrectReportContent">
					<div class="editor_box" v-html='dataInfo.reportDto.vrCorrectReportContent'></div>
				</el-form-item>
			</el-form>
		</div>
		<el-dialog title="分数说明" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' width='420px' destroy-on-close :visible.sync="smallScoringModelShow" class='paddingSmall coursedialog'>
			<el-form ref='addForm'>
				<el-form-item label="分数说明" :label-width="'110px'" prop="smallScoringModel">
					<el-input v-model="smallScoringModel" resize='none' readonly type="textarea" :rows="5" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="smallScoringModelShow = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-dialog title="试题详情" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' width='1450px' destroy-on-close :visible.sync="smallTopicShow" class='paddingSmall coursedialog'>
			<el-table :data="smallTopicList" border row-key="vrTopicId" ref='selectList'>
				<el-table-column prop="question" label="题干" width="320">
					<template slot-scope="scope">
						<span @click="openInfo(scope.row)" class="editor_box pointer" v-html="scope.row.question"></span>
					</template>
				</el-table-column>
				<el-table-column prop="questionType" label="题型" align="center">
					<template slot-scope="scope">
						<span v-for='item in questionTypes' v-if="item.value == scope.row.questionType">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="difficulty" label="难度" align="center">
					<template slot-scope="scope">
						<span v-for='item in difficultys' v-if="item.value == scope.row.difficulty">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="score" label="分数" align="center">
					<template slot-scope="scope">
						{{scope.row.score}}
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="smallTopicShow = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-drawer :visible.sync="topicShow" :with-header="false" :size='450'>
			<div class="topic_info">
				<div class="topic_info_title">试题详情</div>
				<div class="topic_info_body beautifulScroll" v-if='topicShow'>
					<questionview :readonly='true' :allshow='true' :showanswer='true' :form="openForm"></questionview>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import questionview from "@/components/question/questionview.vue"
	import { resourceDetailInfo } from "@/api/resource.js"
	export default {
		components: {
			questionview,
		},
		data() {
			return {
				vrResourceDetailId: this.$route.query.vrResourceDetailId,
				dataInfo: {},
				activeReource: '1',
				types: [{
					value: 1,
					label: '场景'
				}, {
					value: 2,
					label: '模型'
				}, {
					value: 3,
					label: '动画'
				}],
				activeStep: 0,
				smallTypes: [{
					value: 1,
					label: "操作"
				}, {
					value: 2,
					label: "理论"
				}],
				smallScoringModel: '',
				smallScoringModelShow: false,
				smallTopicList: [],
				smallTopicShow: false,
				
				questionTypes: [{
					name: '单选题',
					value: 'SINGLE'
				}, {
					name: '多选题',
					value: 'MULTIPLE'
				}, {
					name: '判断题',
					value: 'JUDGE'
				}],
				difficultys: [{
					name: '简单',
					value: 'SIMPLE'
				}, {
					name: '中等',
					value: 'MEDIUM'
				}, {
					name: '困难',
					value: 'DIFFICULTY'
				}],
				topicShow: false,
				openForm: {},
			}
		},
		created() {
			this.getDataInfo();
		},
		mounted() {

		},
		methods: {
			openInfo(topic) {
				this.openForm = Object.assign({}, topic);
				this.topicShow = true;
			},
			openExp(item, index) {
				this.smallScoringModel = item.smallScoringModel || '';
				this.smallScoringModelShow = true;
			},
			openTopics(item, index) {
				this.smallTopicList = item.smallTopicList || [];
				this.smallTopicShow = true;
			},
			getDataInfo() {
				resourceDetailInfo({
					vrResourceDetailId: this.vrResourceDetailId
				}).then(res => {
					this.dataInfo = res.data;
				})
			},
		}
	}
</script>